{% extends 'base.html' %}

{% block title %}{{ post.title }} - MyBlog{% endblock %}

{% block content %}
<article>
    <h1 class="mb-3">{{ post.title }}</h1>
    
    <div class="text-muted mb-3">
        <span>By {{ post.author.username }}</span> | 
        <span>{{ post.created_at|date:"F d, Y" }}</span> |
        <span>Category: <a href="#">{{ post.category.name }}</a></span>
    </div>
    
    {% if post.image %}
    <img src="{{ post.image.url }}" class="img-fluid rounded mb-4" alt="{{ post.title }}">
    {% endif %}
    
    <div class="post-content mb-4">
        {{ post.content|linebreaks }}
    </div>
    
    <div class="mb-4">
        Tags: 
        {% for tag in post.tags.all %}
        <span class="badge bg-secondary">{{ tag.name }}</span>
        {% endfor %}
    </div>
    
    <!-- 编辑/删除按钮（仅作者可见） -->
    {% if user == post.author %}
    <div class="btn-group mb-4">
        <a href="{% url 'post-update' post.pk %}" class="btn btn-sm btn-outline-primary">Edit</a>
        <a href="{% url 'post-delete' post.pk %}" class="btn btn-sm btn-outline-danger">Delete</a>
    </div>
    {% endif %}
    
    <!-- 评论区域 -->
    <section class="comments mt-5">
        <h3>Comments ({{ post.comments.count }})</h3>
        
        {% for comment in post.comments.all %}
        <div class="card mb-3">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <strong>{{ comment.author.username }}</strong>
                    <small class="text-muted">{{ comment.created_at|timesince }} ago</small>
                </div>
                <p class="mt-2">{{ comment.text }}</p>
            </div>
        </div>
        {% empty %}
        <p>No comments yet.</p>
        {% endfor %}
        
        <!-- 评论表单 -->
        {% if user.is_authenticated %}
        <form method="post" class="mt-4">
            {% csrf_token %}
            <div class="mb-3">
                <textarea name="text" class="form-control" rows="3" placeholder="Add a comment..."></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
        {% else %}
        <p class="text-muted">Please <a href="{% url 'account_login' %}">login</a> to comment.</p>
        {% endif %}
    </section>
</article>
{% endblock %}